<template>
  <BasicDrawer
    :destroy-on-close="true"
    :showFooter="false"
    width="60%"
    title="成员管理"
    @register="registerDrawer"
  >
    <BasicTable @register="register">
      <template #tableTitle>
        <TableAction
          :actions="[
            {
              label: '添加成员',
              type: 'primary',
              size: 'middle',
              icon: 'ant-design:plus-outlined',
              onClick: handleAdd.bind(null),
              auth: ['admin', 'sys:rbac:saveUserRole'],
            },
            {
              label: '批量删除',
              type: 'primary',
              size: 'middle',
              danger: true,
              icon: 'ant-design:delete-outlined',
              popConfirm: {
                title: '您确定删除这几条记录吗？',
                confirm: handleDelete.bind(null, undefined),
              },
              disabled: mSelectedRowKeys.length == 0,
              auth: ['admin', 'sys:rbac:removeUserRole'],
            },
          ]"
        />
      </template>
      <template #bodyCell="{ column, record }">
        <div v-if="column.dataIndex == '__ACTION__'">
          <TableAction
            :actions="[
              {
                label: '移除用户',
                icon: 'ant-design:delete-outlined',
                popConfirm: {
                  title: '您确定删除该条记录吗？',
                  confirm: handleDelete.bind(null, record),
                },
                auth: ['admin', 'sys:rbac:removeUserRole'],
              },
            ]"
          />
        </div>
      </template>
    </BasicTable>
  </BasicDrawer>
  <SelectUser ref="selectUserRef" @success="reload" />
</template>
<script setup lang="ts">
  import { BasicDrawer, useDrawer } from '@/components/Drawer';
  import { BasicTable, FormSchema, useTable, TableAction } from '@/components/Table/';
  import { ref } from 'vue';
  import { userListByRoleId, removeUserRole } from '@/api/sys/rbac';
  import { message } from 'ant-design-vue';
  import SelectUser from './SelectUser.vue';

  const selectUserRef = ref();
  const tableColumns = [
    {
      title: '用户名',
      dataIndex: 'userName',
    },
    {
      title: '姓名',
      dataIndex: 'realName',
    },
    {
      title: '手机号',
      dataIndex: 'mobilePhone',
    },
    {
      title: '操作',
      dataIndex: '__ACTION__',
      width: 120,
    },
  ];
  const searchFormSchemas: FormSchema[] = [
    {
      label: '用户名',
      field: 'm_LIKE_userName',
      component: 'Input',
      colProps: { span: 6 },
      componentProps: {
        placeholder: '请输入用户名',
      },
    },
    {
      label: '姓名',
      field: 'm_LIKE_realName',
      component: 'Input',
      colProps: { span: 6 },
      componentProps: {
        placeholder: '请输入姓名',
      },
    },
    {
      label: '手机号',
      field: 'm_LIKE_mobilePhone',
      component: 'Input',
      colProps: { span: 6 },
      componentProps: {
        placeholder: '请输入手机号',
      },
    },
  ];

  const currentRecord = ref();
  const mSelectedRowKeys = ref<any>([]);
  const [register, { reload }] = useTable({
    rowKey: 'id',
    showIndexColumn: false,
    useSearchForm: true,
    formConfig: {
      labelWidth: 80,
      schemas: searchFormSchemas,
    },
    api: userListByRoleId,
    columns: tableColumns,
    beforeFetch: (params) => {
      return {
        ...params,
        roleId: currentRecord.value.id,
      };
    },
    rowSelection: {
      type: 'checkbox',
      onChange(selectedRowKeys) {
        mSelectedRowKeys.value = selectedRowKeys;
      },
    },
    customRow: undefined,
  });
  const [registerDrawer, { openDrawer }] = useDrawer();
  // 打添加成员弹窗
  const handleAdd = () => {
    selectUserRef.value.show(currentRecord.value);
  };
  // 删除成员
  const handleDelete = (record) => {
    const ids = record ? [record.id] : mSelectedRowKeys.value;
    removeUserRole(
      ids.map((userId) => {
        return {
          roleId: currentRecord.value.id,
          userId: userId,
        };
      }),
    ).then(() => {
      message.success('删除成功');
      mSelectedRowKeys.value = [];
      reload();
    });
  };
  defineExpose({
    show(record) {
      currentRecord.value = record;
      openDrawer();
    },
  });
</script>
